<template>
	<view class="checking-container">
		<!-- 考勤统计部分 -->
		<view class="attendance-stats">
			<view class="header">
				<view class="title">
					<view class="blue-bar"></view>
					<text class="title-text">考勤统计	<text class="rules-text">考勤规则</text></text>
				</view>
			
				<view class="semester-selector">
				<text class="padding-right-xs">本学期 </text>
				<uv-icon name="arrow-down" color="#2979ff" size="14"></uv-icon>
			</view>
			</view>
			
			
			
			<view class="stats-numbers">
				<view class="stats-item">
					<view class="number-area">
						<text class="big-number">65</text>
						<text class="unit">天</text>
					</view>
					<text class="label">统计天数</text>
				</view>
				<view class="divider"></view>
				<view class="stats-item">
					<view class="number-area">
						<text class="big-number">63</text>
						<text class="unit">天</text>
					</view>
					<text class="label">实际到校天数</text>
				</view>
			</view>
			
			<view class="attendance-types">
				<view class="type-item solid padding-tb-sm radius-l">
					<view class="type-icon normal">
						<uv-icon name="checkmark" color="#fff" size="16"></uv-icon>
					</view>
					<text class="type-name">正常</text>
					<text class="type-count">3</text>
				</view>
				
				<view class="type-item type-item solid padding-tb-sm radius-l">
					<view class="type-icon leave">
						<uv-icon name="minus" color="#fff" size="16"></uv-icon>
					</view>
					<text class="type-name">请假</text>
					<text class="type-count">3</text>
				</view>
				
				<view class="type-item type-item solid padding-tb-sm radius-l">
					<view class="type-icon late">
						<uv-icon name="clock" color="#fff" size="16"></uv-icon>
					</view>
					<text class="type-name">迟到</text>
					<text class="type-count">3</text>
				</view>
				
				<view class="type-item type-item solid padding-tb-sm radius-l">
					<view class="type-icon early">
						<uv-icon name="close" color="#fff" size="16"></uv-icon>
					</view>
					<text class="type-name">早退</text>
					<text class="type-count">3</text>
				</view>
				
				<view class="type-item type-item solid padding-tb-sm radius-l">
					<view class="type-icon absent">
						<uv-icon name="close" color="#fff" size="16"></uv-icon>
					</view>
					<text class="type-name">旷课</text>
					<text class="type-count">3</text>
				</view>
			</view>
		</view>
		
		<!-- 考勤明细部分 -->
		<view class="attendance-detail">
			<view class="header">
				<view class="title">
					<view class="blue-bar"></view>
					<text class="title-text">考勤明细</text>
				</view>
			</view>
			
			<!-- 日期记录 -->
			<view class="record-card" v-for="(item, index) in records" :key="index">
				<view class="record-header" @tap="handleDetailClick(item.date)">
					<text class="record-date">{{item.date}}</text>
					<view class="view-detail">
						<text> 详情</text>
						<uv-icon name="arrow-right" size="14" color="#999"></uv-icon>
					</view>
				</view>
				
				<view class="record-items">
					<view class="record-item" v-for="(timeRecord, idx) in item.timeRecords" :key="idx">
						<view class="time-info">
							<view class="blue-dot"></view>
							<text>{{timeRecord.time}}打卡</text>
							<text v-if="timeRecord.earlyTime" class="early-time">早退时长：{{timeRecord.earlyTime}}</text>
						</view>
						<view :class="['punch-status', timeRecord.status ? 'punched' : 'not-punched']">
							{{timeRecord.status ? '已打卡' : '未打卡'}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: [
					{
						date: '2022-08-17',
						timeRecords: [
							{ time: '上午', status: true, earlyTime: '' },
							{ time: '中午', status: false, earlyTime: '' },
							{ time: '下午', status: true, earlyTime: '' }
						]
					},
					{
						date: '2022-08-17',
						timeRecords: [
							{ time: '上午', status: true, earlyTime: '' },
							{ time: '中午', status: false, earlyTime: '' },
							{ time: '下午', status: true, earlyTime: '10分钟' }
						]
					}
				]
			}
		},
		methods: {
			// 这里可以添加方法来处理数据或事件
			handleDetailClick(record) {
				uni.navigateTo({
	    url: '/pages/checking/checkingPage?date=' + record
	  })

				// 处理点击事件
				console.log('查看详情', record);

			}
			
		}
	}
</script>

<style>
.checking-container {
	background-color: #f5f7fa;
	padding: 20rpx;
	min-height: 100vh;
}

/* 公共样式 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.title {
	display: flex;
	align-items: center;
}

.blue-bar {
	width: 8rpx;
	height: 32rpx;
	background-color: #2979ff;
	border-radius: 4rpx;
	margin-right: 12rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 500;
}

/* 考勤统计样式 */
.attendance-stats {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.rules-text {
	color: #2979ff;
	font-size: 28rpx;
}

.semester-selector {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 28rpx;
	color: #333;
	 
}

.stats-numbers {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 20rpx 0 40rpx;
}

.stats-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.divider {
	width: 1px;
	height: 80rpx;
	background-color: #eeeeee;
}

.number-area {
	display: flex;
	align-items: baseline;
}

.big-number {
	font-size: 72rpx;
	font-weight: bold;
	color: #333;
}

.unit {
	font-size: 28rpx;
	color: #333;
	margin-left: 5rpx;
}

.label {
	font-size: 26rpx;
	color: #666;
	margin-top: 10rpx;
}

.attendance-types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	 gap: 20rpx;
}

.type-item {
	display: flex;
	justify-content: center;
	/* flex-direction: column; */
	align-items: center;
	gap: 15rpx;
}

.type-icon {
	width: 48rpx;
	height: 48rpx;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 8rpx;
}

.normal {
	background-color: #4cd964;
}

.leave {
	background-color: #2979ff;
}

.late {
	background-color: #ff3b30;
}

.early {
	background-color: #ff9500;
}

.absent {
	background-color: #9c26b0;
}

.type-name {
	font-size: 22rpx;
	color: #333;
	margin-bottom: 4rpx;
}

.type-count {
	font-size: 32rpx;
	font-weight: bold;
}

/* 考勤明细样式 */
.attendance-detail {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
}

.record-card {
	background-color: #f8f9fa;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 15rpx;
	/* border-bottom: 1rpx solid #eeeeee; */
}

.record-date {
	font-size: 28rpx;
	font-weight: bold;
}

.view-detail {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
}

.record-items {
	padding-top: 15rpx;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15rpx 0;
}

.time-info {
	display: flex;
	align-items: center;
}

.blue-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background-color: #2979ff;
	margin-right: 10rpx;
}

.early-time {
	color: #ff9500;
	font-size: 24rpx;
	margin-left: 10rpx;
}

.punch-status {
	padding: 6rpx 20rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
}

.punched {
	background-color: rgba(76, 217, 100, 0.1);
	color: #4cd964;
}

.not-punched {
	background-color: rgba(255, 59, 48, 0.1);
	color: #ff3b30;
}
</style>
